<template>
  <view style="width: 100%;height: 100vh;">
    <login v-if="is_login" v-on:x="to_login" v-on:plogin="to_login"></login>
    <details-skeleton v-if="!show"></details-skeleton>
    <scroll-view v-if="show" :scroll-top="setScrollTopComment" scroll-with-animation scroll-anchoring class="content"
                 scroll-y @scroll="viewScroll" @scrolltolower="end">
      <view class="head-box" :style="headBoxStyle">
        <view class="head" :style="headStyle">
          <view class="last-page" @click="lastPage">
            <uni-icons size="28" type="left" color="#fff"></uni-icons>
          </view>
          <view class="head-title" :style="headTitleStyle">{{ info.title }}</view>
        </view>
      </view>
      <!--      高斯模糊北京-->
      <image class="bj" :src="info.thumb"></image>
      <view class="top-box" :style="topBoxStyle">
        <view class="topic-box">
          <view class="box">
            <view class="topic-top">
              <view class="image">
                <image mode="aspectFill" :src="info.thumb"></image>
              </view>
              <view class="topic-info">
                <view class="title">{{ info.title }}</view>
                <!--                <view class="userCount">{{info.joinNum}}参与</view>-->
              </view>
            </view>
            <view class="source-box">
              <view class="source" v-if="info.cateNames">
                <view class="source-text" v-for="item in (info.cateNames.split('、'))">{{ item }}</view>
              </view>
              <view class="button" @click="setTopicFollow" v-if="info.followed===0">
                <uni-icons color="#00C141" type="plusempty"></uni-icons>
                关注
              </view>
              <view class="button set-list" @click="setTopicFollow" v-if="info.followed===1">
                <uni-icons size="28" color="#828283" type="more-filled"></uni-icons>
              </view>
            </view>

            <!--            <view class="desc">简介：{{info.introduction}}</view>-->
          </view>
          <view class="content-box">
            <!--              规则-->
            <view class="role-box">
              <view class="role-top">奖励通知</view>
              <text>关注话题并参与评论有奖励惊喜等着你呦！<br/>
                如果点赞可进入排行榜更多惊喜等候你！
              </text>
            </view>
            <!--              内容-->
            <view class="text-box" :style="isHideContent?'height: 100rpx;overflow: hidden;':''">
              <view v-if="info.contentType===0" class="comment-text" v-html="info.content"></view>
              <view class="top-message" v-if="info.rewardIntegral && [2,3].includes(info.contentType)">
                <image :src="image_host+'icon_jifen@2x.png'"></image>
                <text v-if="info.contentType===3">投票可获得{{ info.rewardIntegral }}积分奖励</text>
                <text v-if="info.contentType===2">参与PK可能会领取{{ info.rewardIntegral }}积分</text>
              </view>
              <!--                                投票-->
              <vote :item="info" ref="vote" @chageInfo="chageInfo" v-if="info.contentType===3"></vote>
              <!--                pk-->
              <pk :item="info" ref="pk" @chageInfo="chageInfo" v-if="info.contentType===2"></pk>
              <view class="end-message" v-if="info.pkVoteEndtime && [2,3].includes(info.contentType)">
                <image :src="image_host+'icon_timeend@2x.png'"></image>
                <text v-if="info.contentType===3">投票结束：{{ info.pkVoteEndtime }}</text>
                <text v-if="info.contentType===2">pk结束：{{ info.pkVoteEndtime }}</text>
              </view>
              <u-parse v-if="[1,2,3].includes(info.contentType) && info.content" :content="info.content"></u-parse>
              <view class="images"
                    :class="info.picList.length===1?'image-item-1':info.picList.length===2?'image-item-2':''">
                <view class="image-item" v-for="(fileItem,index) in info.picList"
                      @click="showImages(index,info.picList)">
                  <image mode="widthFix" v-if="fileItem.fileType==='image'" class="image" :src="fileItem.url"></image>
                  <image mode="widthFix" v-if="fileItem.fileType==='video'" class="image"
                         :src="fileItem.thumbUrl"></image>
                  <view class="video-play" v-if="fileItem.fileType==='video'">
                    <image :src="image_host+'icon_play.png'"></image>
                  </view>
                </view>
              </view>
            </view>
            <view class="show-comment-text" @click="isHideContent=false" v-if="isHideContent">查看详情
              <uni-icons color="#4AB16E" type="bottom"></uni-icons>
            </view>
            <view class="buttons">
              <view class="button-item button-item-active" @click.stop="setTopicLike($event,info.id,info.praised)">
                <image :src="image_host+(info.praised===1?'dianzan1.png':'dianzan2.png')" mode="aspectFill"></image>
                <text>{{ $toNum(info.praiseNum) }}支持</text>
              </view>
              <view class="button-item" v-if="!info.owerFlag" @click="toMessage">
                <image :src="image_host+'q_icon_pinglun@2x.png'" mode="aspectFill"></image>
                <text>{{ $toNum(info.commentNum) }}评论</text>
              </view>
              <button class="button-item" open-type="share">
                <image :src="image_host+'q_icon_fenxiang@2x(1).png'" mode="aspectFill"></image>
                <text>分享{{ $toNum(info.forwarding) }}</text>
              </button>
            </view>
          </view>

        </view>
        <view style="height: 24rpx;width: 100%;background-color: #F3F5F8"></view>
        <!--        评论-->
        <view class="comment-box">
          <view class="comment-top">
            <view class="title">
              <view class="text1">评论</view>
              <view class="icon"></view>
            </view>
            <view class="screen">
              <view :class="commentPostData.orderParam===0?'screen-item-hover':''" class="screen-item"
                    @click="setScreen(0)">最热
              </view>
              <view :class="commentPostData.orderParam===1?'screen-item-hover':''" class="screen-item"
                    @click="setScreen(1)">最新
              </view>
              <view :class="commentPostData.orderParam===2?'screen-item-hover':''" class="screen-item"
                    @click="setScreen(2)">同门店
              </view>
            </view>
          </view>
          <view v-for="(item,index) in commentList">
            <comment-item :sendIndex="sendIndex" :scrollTopComment="scrollTopComment" @showImages="showImages"
                          :item="item" :index="index" :topicId="topicId"></comment-item>
          </view>
        </view>
        <popular v-show="popularShow"></popular>
        <view style="height: 20vh;"></view>
      </view>
      <!--      button-->
      <view v-if="!info.owerFlag" class="to-comment" @click="toMessage">
        <image mode="aspectFit" :src="image_host+'tab_yaoqin.png'"></image>
      </view>
      <to-message ref="toMessage"></to-message>
      <operation @clickId="clickId" ref="operation"></operation>
      <preview ref="preview"></preview>
    </scroll-view>
  </view>

</template>

<script>
import commentItem from "@/pages/circle/details/components/commentItem.vue";
import toMessage from "@/pages/circle/components/toMessage.vue";
import operation from "@/pages/circle/components/operation.vue";
import uParse from '@/components/gaoyia-parse/parse.vue'
import preview from "@/pages/circle/components/preview.vue";
import detailsSkeleton from "@/pages/circle/skeleton/detailsSkeleton.vue"
import popular from "@/pages/circle/components/popular.vue";
import pk from "@/pages/circle/components/pk.vue";
import vote from "@/pages/circle/components/vote.vue";

export default {
  components: {vote, pk, operation, toMessage, commentItem, uParse, preview, detailsSkeleton, popular},
  data() {
    return {
      show: false,
      image_host: this.image_host + 'quanzi/',
      topBoxStyle: `padding-top: ${uni.getStorageSync('menuInfo').contentTop};`,
      headBoxStyle: `height: ${uni.getStorageSync('menuInfo').contentTop};padding-top: ${uni.getStorageSync('menuInfo').menuTop};`,
      headStyle: `height: ${uni.getStorageSync('menuInfo').menuHeight};`,
      headTitleStyle: "",
      scrollTop: 0,
      topicId: 0,
      info: {},
      commentPostData: {
        topicId: 0,
        page: 1,
        pageSize: 10,
        orderParam: 0,
        lastId: 0
      },
      commentList: [],
      commentTotal: 0,
      type: 0,
      isHideContent: false,
      browseTime: {},
      popularShow: false,
      scrollTopComment: 0,
      setScrollTopComment: 0,
      is_login: false,
      sendIndex: 0,
      listIndex: 0,
      headTime: {},
      pkVoteIndex: ''
    };
  },
  onLoad(e) {
    this.topicId = e.id
    this.commentPostData.topicId = e.id
    this.type = e.type || 0
    this.scrollTopComment = e.scrollTopComment
    this.listIndex = e.index
    this.tag = e.tag || ''
    if (!uni.getStorageSync('token')) {
      return
    }
    this.init()
  },
  watch: {
    info: {
      handler(newArray, oldArray) {
        let info = {
          praiseNum: newArray.praiseNum,
          praised: newArray.praised,
          followed: newArray.followed
        }
        uni.setStorageSync('circleDetails', {index: this.listIndex, info: info})
      },
      deep: true
    }
  },
  onShow() {
    this.is_login = !uni.getStorageSync('token')
    if (uni.getStorageSync("saveMessage") == this.topicId) {
      // 获取自己评论的数据
      this.getCommentUser()
      this.sendIndex = -1
      uni.setStorageSync("saveMessage", 0)
    }
  },
  onUnload() {
    if (this.listIndex && this.pkVoteIndex >= 0) {
      uni.$emit('setListVoteIndex', {index: this.listIndex, pkVoteIndex: this.pkVoteIndex})
    }
    // uni.$emit('setListVoteIndex', {index: 1, pkVoteIndex: 1})
    clearTimeout(this.browseTime)
  },
  methods: {
    init() {
      this.getDetails()
      this.getCommentList()
      this.scanComment()//浏览评论
      this.scanTopic()//浏览话题
      this.setTopicRead()//设置消息已读
    },
    chageInfo(e) {
      this.pkVoteIndex = e
    },
    to_login() {
      this.is_login = false
      this.init()
    },
    // 获取圈子详情
    async getDetails() {
      let {data} = await this.$javaCircle.doRequest("post", 'circle/customer/topic/getTopicInfo?topicId=' + this.topicId + '&tag=' + this.tag, '', '', false)
      this.show = true
      if (!data.data && !this.is_login) {
        uni.showModal({
          title: '该话题已被删除！', success() {
            uni.switchTab({url: '/pages/circle/index'})
          }
        })
      }
      this.info = data.data
      this.info.picList = JSON.parse(this.info.picList) || []
      if (this.info.followed === 1 || [2, 3].includes(this.info.contentType)) {
        this.isHideContent = false
      }
      this.setScrollTopComment = this.scrollTopComment
    },
    // 获取自己的评论
    async getCommentUser() {
      let postData = this.commentPostData;
      let {data} = await this.$javaCircle.doRequest("post", 'circle/customer/comment/myCommentlist', postData, 'json', false)
      let item = data.data[data.data.length - 1]
      item.owerFlag = true;
      this.info.owerFlag = true
      this.commentList.unshift(item)
      let list = this.commentList
      this.commentList = []
      this.$nextTick(() => {
        this.commentList = list
      })
    },
    // 获取评论详情
    async getCommentList() {
      let postData = this.commentPostData;
      let {data} = await this.$javaCircle.doRequest("post", 'circle/customer/comment/list', postData, 'json', true)
      this.commentTotal = data.data.total;
      let commentList = postData.page === 1 ? [] : this.commentList
      this.commentList = commentList.concat(data.data.list)
      this.commentPostData.lastId = this.commentList[this.commentList.length - 1].id
      if (this.commentTotal <= postData.page * postData.pageSize) {
        this.popularShow = true
      }
    },
    // 设置评论
    setScreen(index) {
      this.commentPostData.orderParam = index;
      this.commentPostData.page = 1;
      this.commentTotal = 0;
      this.commentList = []
      this.popularShow = false
      this.getCommentList()
    },
    swiperChange(e) {
      this.setScreen(e.detail.current)
    },
    // 关注话题
    async setTopicFollow(e) {
      if (this.info.followed === 1) {
        this.$refs.operation.showPop([1])
        return
      }
      let url = 'circle/customer/topic/setTopicFollow?topicId=' + this.topicId + '&followType=1'
      let {data} = await this.$javaCircle.doRequest("post", url, '', '', false)
      if (data.code !== 0) {
        uni.showToast({title: data.message, icon: "none"})
        return
      }
      if (data.data.addIntegral > 0) {
        this.showMessage(e, '积分+' + data.data.addIntegral)
      }
      this.info.followed = 1
    },
    // 点赞话题
    async setTopicLike(e, topicId, liked) {
      liked = liked === 0 ? 1 : 0
      let {data} = await this.$javaCircle.doRequest("post", `circle/customer/topic/setTopicLike?topicId=${topicId}&liked=${liked}`, {}, 'json', false)
      if (data.code === 0) {
        this.info.praised = liked
        this.info.praiseNum += liked === 1 ? 1 : -1
        if (data.data.addIntegral !== 0) {
          this.showMessage(e, '积分+' + data.data.addIntegral)
          return
        }
        if (liked === 1) {
          this.showMessage(e, '闪耀值+1')
        }
      }
    },
    // 晴空未度消息
    setTopicRead() {
      if (this.type === 0) {
        return
      }
      this.$javaCircle.doRequest('post', "circle/customer/topic/setTopicRead?topicId=" + this.topicId + '&type=' + this.type, '', '', false)
    },
    async clickId(id) {
      if (id === 1) {
        let url = 'circle/customer/topic/setTopicFollow?topicId=' + this.topicId + '&followType=0'
        let {data} = await this.$javaCircle.doRequest("post", url, '', '', false)
        if (data.code !== 0) {
          uni.showToast({title: data.message, icon: "none"})
          return
        }
        this.info.followed = 0
      }
    },
    showMessage(e, title) {
      this.$refs.toMessage.init(e.detail.x, e.detail.y + 100, title)
    },
    viewScroll(e) {
      this.scrollTopComment = e.detail.scrollTop
      clearTimeout(this.headTime)
      this.headTime = setTimeout(() => {
        this.getTopBox()
      }, 300)
    },
    getTopBox() {
      let query = uni.createSelectorQuery().in(this);
      query.select('.top-box').boundingClientRect(data => {
        this.scrollTop = Math.abs(data.top)
        this.headBoxStyle = `height: ${uni.getStorageSync('menuInfo').contentTop};padding-top: ${uni.getStorageSync('menuInfo').menuTop};background-color: rgba(17, 182, 110, ${this.scrollTop / 100});`
        this.headTitleStyle = `opacity: ${this.scrollTop / 100};`
      }).exec();
    },
    toMessage() {
      uni.navigateTo({url: '/pages/circle/details/saveMessage?id=' + this.topicId})
    },
    lastPage() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack()
      } else {
        uni.switchTab({url: '/pages/circle/index'})
      }

      // uni.redirectTo({url:"/pages/circle/index"})
    },
    // 话题浏览
    scanTopic() {
      this.browseTime = setTimeout(async () => {
        let data = await this.$javaCircle.doRequest("get", 'circle/customer/comment/scanTopic', {id: this.topicId}, '', false)
      }, 1000 * 15)
    },
    // 评论浏览
    scanComment() {
      // setTimeout(async ()=>{
      //   let data = await this.$javaCircle.doRequest("get",'circle/customer/comment/scanComment',{id:this.topicId},'',false)
      //   this.scanComment()
      // },1000*15)
    },
    end() {
      if (this.commentPostData.page * this.commentPostData.pageSize < this.commentTotal) {
        this.commentPostData.page++
        this.getCommentList()
      }
    },
    showImages(index, list) {
      this.$refs.preview.init(index, list)
    }
  },
  onShareAppMessage(res) {
    this.info.forwarding++
    this.$javaCircle.doRequest("post", 'circle/customer/topic/setShareNum?topicId=' + this.info.id, '', '', false)
    return {
      title: this.info.title,
      path: "/pages/circle/details/details?id=" + this.info.id,
      imageUrl: this.info.thumb
    }
  }
}
</script>
<style>
@import url("@/components/u-parse/u-parse.css");
</style>
<style lang="scss" scoped>
page {
  width: 100% !important;
  height: 100% !important;
  background-color: #F3F5F8 !important;
}

button {
  margin: 0;
  padding: 0;
  background-color: inherit;
  position: static;
}

button:after {
  content: none;
}

button::after {
  border: none;
}

.button-item-active image {
  transform: scale(1);
}

.button-item-active:active image {
  transform: scale(2);
  transition: all .3s linear;
}

.head-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  box-sizing: border-box;
  background-color: rgba(17, 182, 110, 0);
  transition: all .3s linear;
}

.head {
  display: flex;
  align-items: center;
  //justify-content: center;
  position: relative;
}

.last-page {
  position: absolute;
  top: 50%;
  left: 20upx;
  transform: translate(0%, -50%);
}

.head-title {
  opacity: 0;
  color: #fff;
  font-size: 32upx;
  font-weight: 600;
  width: 400upx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 83upx;
  box-sizing: border-box;
}

.content {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  overflow-anchor: auto;
  padding-bottom: env(safe-area-inset-bottom);

  .bj {
    position: fixed;
    width: 100%;
    height: 60vh;
    filter: brightness(0.3) blur(5upx);
    left: 0;
    top: 0;
    z-index: 1;
    background-color: #0f1011;
  }

  .top-box {
    width: 100%;
    position: absolute;
    z-index: 2;
    box-sizing: border-box;

    .topic-box {
      box-sizing: border-box;
      position: relative;

      .topic-top {
        width: 100%;
        display: flex;

        .image {
          width: 140upx;
          height: 140upx;
          border-radius: 8upx;
          background-color: #666666;
          margin-right: 20upx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 8upx;
          }
        }

        .topic-info {
          flex: 1;

          .title {
            width: 490upx;
            font-size: 42upx;
            color: #fff;
            font-weight: 500;
            margin-bottom: 8upx;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .tag {
            width: 490upx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 8upx;

            text {
              background-color: #F1FAF3;
              color: #6AAC80;
              font-size: 30upx;
              box-sizing: border-box;
              padding: 0 8upx;
              border-radius: 8upx;
              margin-right: 12upx;
            }
          }

          .userCount {
            font-size: 28upx;
            color: #C6C6C6;
          }
        }
      }

      .source-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .source {
        flex: 1;
        //overflow: hidden;
        //white-space: nowrap;
        //text-overflow: ellipsis;
        font-size: 28upx;
        color: #999999;
        margin-top: 12upx;
        display: flex;
        flex-wrap: wrap;

        .source-text {
          width: fit-content;
          background-color: hsla(154, 83%, 39%, .3);
          color: hsla(154, 83%, 39%, 1);
          margin-right: 12upx;
          border-radius: 8upx;
          padding: 0 10upx;
          white-space: nowrap;
          margin-bottom: 12upx;
        }
      }

      .button {
        width: 170upx;
        height: 68upx;
        border-radius: 39upx;
        background: #C9EFD6;
        color: #11B66E;
        line-height: 68upx;
        text-align: center;
        font-size: 36upx;
        font-weight: 500;
      }

      .desc {
        box-sizing: border-box;
        padding: 22upx 18upx;
        background-color: rgba(222, 222, 222, .4);
        font-size: 38upx;
        color: #DEDEDE;
        margin-top: 18upx;
        border-radius: 8upx;
      }

      .buttons {
        width: 100%;
        border-top: 1upx solid #D8D8D8;
        height: 98upx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 31upx;

        .button-item {
          width: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26upx;
          color: #666;

          image {
            width: 44upx;
            height: 44upx;
            margin-right: 4upx;
          }
        }
      }
    }
  }
}

.content-box {
  background-color: #fff;
  border-radius: 40upx 40upx 0 0;
  padding: 30upx 30upx 0 30upx;
  box-sizing: border-box;
  margin-top: 32upx;

  .role-box {
    width: 100%;
    box-sizing: border-box;
    padding: 54upx 22upx 20upx 22upx;
    background-color: #F3F5F8;
    position: relative;
    font-size: 34upx;
    color: #666666;

    .role-top {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 200upx;
      height: 44upx;
      background-color: #DDE4EF;
      border-radius: 0 0 24upx 24upx;
      line-height: 44upx;
      text-align: center;
      font-size: 34upx;
      color: #333;
      font-weight: 500;
    }
  }

  .text-box {
    box-sizing: border-box;
    padding: 30upx 0;
    padding-bottom: 0;
    z-index: 1;
    font-size: 42upx;
    line-height: 68upx;
  }
}

.box {
  padding: 0 30upx;
}

.comment-box {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 40upx 30upx;
  min-height: 300upx;
  transition: all .3s linear;

  .comment-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40upx;

    .title {
      height: 42upx;
      width: 120upx;
      font-size: 42upx;
      color: #333;
      font-weight: 600;
      position: relative;

      .text1 {
        width: 100upx;
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0%, -50%);
      }

      .icon {
        z-index: 1;
        position: absolute;
        left: 0;
        bottom: 0upx;
        width: 118upx;
        height: 8upx;
        background: linear-gradient(to right, #54B174 0%, #fff 100%);
      }
    }

    .screen {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 58upx;
      border-radius: 29upx;
      box-sizing: border-box;
      border: 1upx solid #979797;

      .screen-item {
        padding: 0 22upx;
        font-size: 28upx;
        color: #666666;
        border-radius: 29upx;
        height: 100%;
        line-height: 58upx;
      }

      .screen-item-hover {
        background-color: #54B174;
        color: #fff;
      }
    }
  }
}

.to-comment {
  width: 516upx;
  height: 145upx;
  position: fixed;
  left: 50%;
  bottom: 60upx;
  transform: translate(-50%, 0);
  z-index: 10;

  image {
    width: 100%;
    height: 100%;
  }
}

.set-list {
  background-color: rgba(0, 0, 0, 0) !important;
}

.comment-text {
  white-space: pre-wrap;
}

.show-comment-text {
  width: 100%;
  height: 110upx;
  font-size: 38upx;
  color: #4AB16E;
  font-weight: 500;
  text-align: center;
  line-height: 110upx;
  z-index: 10;
}

.images {
  display: flex;
  flex-wrap: wrap;
  column-count: 3;
  column-gap: 25upx;
  margin-top: 24upx;
  height: auto;

  .image-item {
    width: 174upx;
    // height: 174upx;
    position: relative;

    .image {
      width: 100%;
      height: 100%;
    }

    .video-play {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .7);
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 62upx;
        height: 62upx;
      }
    }
  }
}

.image-item-1 .image-item {
  width: 100% !important;
  height: auto !important;
}

.image-item-2 {
  column-gap: 14upx;
}

.image-item-2 .image-item {
  width: 338upx !important;
  height: auto !important;
}

.top-message {
  width: fit-content;
  height: 58upx;
  background-color: #FFFAE3;
  display: flex;
  align-items: center;
  font-size: 38upx;
  color: #FF9500;
  box-sizing: border-box;
  padding: 0 15upx;
  border-radius: 29upx;
  margin: 0 auto;
  margin-bottom: 32upx;

  image {
    width: 40upx;
    height: 40upx;
    margin-right: 12upx;
  }
}

.end-message {
  width: fit-content;
  height: 58upx;
  display: flex;
  align-items: center;
  font-size: 36upx;
  color: #FF7D51;
  box-sizing: border-box;
  padding: 0 15upx;
  border-radius: 29upx;
  margin: 0 auto;
  margin-top: 32upx;

  image {
    width: 40upx;
    height: 40upx;
    margin-right: 12upx;
  }
}
</style>
